iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
Modern Web

深入現代前端開發系列 第 20

Day20 Autoplay 與 mute

  • 分享至 

  • xImage
  •  

前言

如果用 facebook 網頁版來觀看影片,你會發現自動播放的影片都是靜音的,這是因為瀏覽器為了改善使用者體驗而限制了 autoplay 的條件。

試想如果一個影片就莫名其妙播放然後耳機就突然播出聲音了,不知情的使用者還不被嚇個半死怒關網站,如果是怪怪的網站又忘記帶耳機那場面又更尷尬了。

所以如果想使用 auto-play 可以,瀏覽器規定你必須要是靜音,等到使用者跟網站有互動後(click 事件等)才能夠播放聲音。

要怎麼知道這件事呢?在 <video> 中,你可以用 video.play() 這個 API 來播放影片,這個 API 會回傳一個 Promise,如果成功 resolve 了代表影片可以自動播放,如果 reject 的話就要記得做 fallback 處理:

  1. 例如如果進到 catch,就把 video.muted = true 再播放一次試試看
  2. 直接顯示無法播放的提示
video.play
	.then() // 成功播放,看要做什麼
  .catch() // 無法播放

MEI(Media Engagement Index)

Chrome 會自動幫你計算這個 index 的 score,比如說你常常到 a 網站去看影片,只要超過一定分數,那麼 Chrome 就會幫你解除自動播放的機制。(桌面版)

不過因為我們並不知道網站是否有在使用者的 MEI 裡頭,所以一律都要做處理比較好。如果想看自己的 MEI,可以到 chrome://media-engagement/

Chrome enterprise policy

Chrome 的內部有一些 enterprise list 可以直接略過 autoplay 的限制,像是 youtube 就可以無視 autoplay 限制直接播放有聲音的影片。

至於要怎麼變成 enterprise policy,這恐怕就是人脈與企業的問題了。

小結

Google developer 當中有比較詳盡的解說,可以直接參考。在實作自動播放的時候千萬要記得把 autoplay policy 謹記在心。


上一篇
Day19 探索 Browser API(下)- ServiceWorker, WebWorker 與其他
下一篇
Day21 前端快取機制 - CDN, localStorage, Cache-Control, ServiceWorker
系列文
深入現代前端開發32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言